<!-- 功能：DNS设置 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月12日 23:24:52 -->
<template>
  <a-tabs v-model:activeKey="activeKey" type="card" class="y-tabs">
    <a-tab-pane key="dnsSheZhi" tab="DNS设置">
      <a-row>
        <a-col :span="24">
          <a-button type="link" class="y-btn" @click="openDnsFuWuQiSheZhiModal">
            <template #icon>
              <plus-outlined />
            </template>
            DNS服务器设置
          </a-button>
          <!-- 弹窗 - DNS服务器设置 -->
          <dnsFuWuQiSheZhiModal v-model:visible="visibleDnsFuWuQiSheZhiModal"></dnsFuWuQiSheZhiModal>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-alert banner message="说明: 修改网络参数会重启网络,可能造成数据传输中断或错误,修改时请确保服务停止或未使用!" type="warning" show-icon />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <template #title><span class="y-wangLuoJieKou-title">DNS服务器</span></template>

          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>

    <a-tab-pane key="zhuJiMingChaXunJingTaiBiao" tab="主机名查询静态表">
      <a-row justify="end">
        <a-col :span="8">
          <a-input v-model:value="searchValue">
            <template #addonBefore>
              <search-outlined /> 搜索:
            </template>
          </a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-card>
            <a-table bordered :data-source="dataSource" :columns="columns" class="y-table" :pagination="pagination"></a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>
  </a-tabs>

</template>

<script setup>
const activeKey = ref('dnsSheZhi')
import dnsFuWuQiSheZhiModal from './modal/dnsFuWuQiSheZhiModal.vue'

const visibleDnsFuWuQiSheZhiModal = ref(false)

const openDnsFuWuQiSheZhiModal = () => {
  visibleDnsFuWuQiSheZhiModal.value = true
}

const searchValue = ref('')

// 表格列
const columns = ref([
  {
    title: '主机名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: 'IP地址',
    dataIndex: 'ipAddress',
    key: 'ipAddress',
    align: 'center',
    sorter: {
      compare: (a, b) => a.ipAddress.localeCompare(b.ipAddress),
      multiple: 2
    }
  }
])

// 表格数据
const dataSource = ref([
  {
    key: '1',
    name: 'controller-1',
    ipAddress: '192.168.1.1'
  },
  {
    key: '2',
    name: 'controller-2',
    ipAddress: '192.168.1.2'
  }
])

// 分页
const pagination = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('DNS设置分页改变>>', page, pageSize)
  }
}
</script>

<style scoped>
.y-wangLuoJieKou-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}
.ant-row {
  margin-bottom: 10px;
}
</style>